<template>
  <van-tabbar v-model="active" :fixed="fixed" placeholder>
    <van-tabbar-item @click="toOther" icon="wap-home-o">首页</van-tabbar-item>
    <van-tabbar-item @click="toOther" icon="friends-o">社区</van-tabbar-item>
    <van-tabbar-item @click="toOther" icon="comment-o">消息</van-tabbar-item>
    <van-tabbar-item @click="toOther" icon="todo-list-o">行程</van-tabbar-item>
    <van-tabbar-item @click="toOther" icon="contact">我的</van-tabbar-item>
  </van-tabbar>
</template> 
<script>
import { ref, watch } from "vue";
import { useRouter, useRoute } from "vue-router";
import { Tabbar, TabbarItem } from "vant";
export default {
  name: "Jyfooter",
  components: {
    [Tabbar.name]: Tabbar,
    [TabbarItem.name]: TabbarItem,
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    let active = ref(0);
    watch(
      () => route.path,
      () => {
        active.value = Number(route.query.jyIndex || 0);
      },
      { immediate: true }
    );
    const fixed = true;
    function toOther() {
      switch (active.value) {
        case 0:
          router.push({
            path: "/home/firstpage",
            query: {
              jyIndex: 0,
            },
          });
          break;
        case 1:
          router.push({
            path: "/home/community",
            query: {
              jyIndex: 1,
            },
          });
          break;
        case 3:
          router.push({
            path: "/home/journey",
            query: {
              jyIndex: 3,
            },
          });
          break;
        case 2:
          router.push({
            path: "/home/message",
            query: {
              jyIndex: 2,
            },
          });
          break;
        case 4:
          router.push({
            path: "/home/mine",
            query: {
              jyIndex: 4,
            },
          });
          break;
        default:
          break;
      }
    }
    return {
      active,
      toOther,
      fixed,
    };
  },
};
</script>
<style lang="less" scoped>
</style>
